import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:yuque/app_theme.dart';
import 'package:yuque/page/pages.dart';

class NavigationHomeScreen extends StatefulWidget {
  const NavigationHomeScreen({Key? key}) : super(key: key);

  @override
  State<NavigationHomeScreen> createState() => _NavigationHomeScreenState();
}

class _NavigationHomeScreenState extends State<NavigationHomeScreen> {
  PageController? _pageController;
  int _page = 0;

  @override
  void initState() {
    _pageController = PageController(initialPage: _page);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _pageController?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            physics: NeverScrollableScrollPhysics(),
            controller: _pageController,
            onPageChanged: (page) {
              setState(() {
                _page = page;
              });
            },
            children: <Widget>[
              HomePage(),
              MePage(),
            ],
          ),
          if (_page != 1)
          _appBar(),
        ],
      ),
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  Widget _appBar() {
    return Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Container(
          width: kToolbarHeight,
          height: kToolbarHeight,
          child: GestureDetector(
            onTap: () {
              print('header image hit');
            },
            child: Padding(
              padding: EdgeInsets.all(15),
              child: CircleAvatar(
                foregroundImage: NetworkImage(
                    "https://cdn.nlark.com/yuque/0/2020/jpeg/anonymous/1593151050959-b3cb1592-b354-4bd2-a5e6-c5967afa5e56.jpeg?x-oss-process=image%2Fresize%2Cm_fill%2Cw_48%2Ch_48%2Fformat%2Cpng"),
              ),
            ),
          )),
    );
  }

  Widget _bottomAppBar() {
    var activeIconColor = Theme.of(context).iconTheme.color;
    var unActiveIconColor = AppTheme.deactivatedText;
    return BottomAppBar(
      child: Container(
        padding: EdgeInsets.only(top: 5),
        height: 55,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _iconButton(
              onTap: () {
                _pageController?.jumpToPage(0);
              },
              icon: Icon(
                LucideIcons.feather,
                size: 22,
                color: _page == 0 ? activeIconColor : unActiveIconColor,
              ),
              label: Text(
                "小记",
                style: TextStyle(
                  fontSize: 12,
                  color: _page == 0 ? activeIconColor : unActiveIconColor,
                ),
              ),
            ),
            _iconButton(
              onTap: () {
                _pageController?.jumpToPage(1);
              },
              icon: Icon(
                LucideIcons.user,
                size: 22,
                color: _page == 1 ? activeIconColor : unActiveIconColor,
              ),
              label: Text(
                "我",
                style: TextStyle(
                  fontSize: 12,
                  color: _page == 1 ? activeIconColor : unActiveIconColor,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _iconButton({
    required Widget icon,
    Widget? label,
    GestureTapCallback? onTap,
  }) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          children: [
            icon,
            SizedBox(height: 5),
            if (label != null) label,
          ],
        ),
      ),
    );
  }
}
